<template>
	<view>
		<view class="graphics-back">
			<text class="graphics-Title">请详细描述你的病情</text>
			<textarea placeholder="为了更好获得医生帮助,请尽可能详细描述病情" v-model="obj.illness" maxlength="300"
				placeholder-class="textarea-color" />
		</view>
		<!-- 指导用药 -->
		<view class="graphics-back">
			<checkbox-group @change="change">
				<label>
					<checkbox v-model="obj.guide" color="#0176ff" />
					需要医生指导用药
				</label>
			</checkbox-group>
		</view>
		<!-- 上传图片 -->
		<view class="graphics-back">
			<text class="graphics-Title">上传检查报告或患处照片</text>
			<view class="pat-image">
				<view class="upload-Image" v-for="(item,index) in obj.ins_report" :key="index">

					<image :src="item" mode="widthFix"></image>
					<image src="/static/other/shanchu-goods.svg" @click="del(index)" mode="widthFix">
					</image>
				</view>
				<view>
					<image src="/static/other/shuxing-img.png" mode="aspectFill" @click="add"></image>
				</view>
			</view>
		</view>
		<!-- 选择就诊人 -->
		<view class="graphics-back">
			<text class="graphics-Title">选择就诊人</text>
			<view class="patient-view">
				<image src="/static/other/touxiang.svg" mode="widthFix"></image>
				<text>{{ cart.name }}</text>
				<text @click="go">选择就诊人</text>
			</view>
		</view>
		<!-- 提交 -->
		<view style="height:150px"></view>
		<view class="submit">
			<text>取消</text>
			<text @click="submit">提交</text>
		</view>
	</view>
</template>

<script>
	import {
		upload
	} from "../../utils/API/img";
	import {
		graphics,
		upload_picture
	} from "../../utils/API/homeapi";

	export default {
		data() {
			return {
				cart: {},
				obj: {
					illness: "",
					guide: false,
					ins_report: [],
					patient_id: ""
				}
			};
		},
		onShow() {
			this.cart = this.store.state.obj
			this.obj.patient_id = this.store.state.obj._id

		},
		methods: {
			async submit() {
				let data = await graphics(this.obj)
        console.log(data.msg)
				if (data.msg === "提交成功") {
					wx.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 2000
					})
            this.store.commit('add',{})
					wx.switchTab({
						url: '/pages/home/home'
					})
				}
			},
			change(e) {
        console.log( e.detail.value[0])
				this.obj.guide = e.detail.value[0] === "false";
			},
			go() {
				wx.navigateTo({
					url: "/pages/patientoreder/patientoreder"
				})
			},
			del(index) {
				this.obj.ins_report.splice(index, 1)
			},
			//提交照片
			async add() {
				let data = await upload(upload_picture, '图片上传中')
				if (data.msg === 'SUCCESS') {
					this.obj.ins_report.push(data.data)
					wx.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 2000
					})
				} else {
					wx.showToast({
						title: '提交失败',
						icon: 'error',
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 表单提交 */
	@import url('../../static/common-style/form.css');

	page {
		background-color: #fafafa;
	}

	.graphics-back {
		background-color: #ffffff;
		margin: 10px;
		padding: 10px;
		border-radius: 5px;
	}

	.graphics-Title {
		font-size: 17px;
		font-weight: bold;
		display: block;
		padding-bottom: 10px;
	}

	textarea {
		width: 100%;
		height: 125px;
	}

	.textarea-color {
		color: #00c8c8;
	}

	/* 上传图片 */
	.pat-image {
		display: flex;
		flex-wrap: wrap;
	}

	.pat-image view {
		width: calc(33.3% - 2.5px * 2);
		height: 100px;
		margin: 2.5px;
	}

	.pat-image image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 3.5px;
	}

	.upload-Image {
		position: relative;
	}

	.upload-Image image:nth-child(2) {
		width: 15px !important;
		height: 15px !important;
		position: absolute;
		top: 0;
		right: 0;
	}

	/* 选择就诊人 */
	.patient-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.patient-view image {
		width: 60px;
		height:60px;
	}

	.patient-view text:nth-child(2) {
		flex: 1;
		padding: 0 25px;
		font-weight: bold;
	}

	.patient-view text:nth-child(3) {
		color: #2c76ef;
	}
</style>
